<template>
<div class="user-list">
    <user-search @search-event="SearchUserInfo"></user-search>
    <div class="div-table-layout">
    <my-table :list="partPageUserList">
        <!-- #th: 标题 -->
        <template v-slot:th>
            <th scope='col' v-for="item in newThList" :key="item">{{item}}</th>
        </template>
        <!-- #td: 内容 -->
        <template v-slot:td="{td: { uid, username, email, tele, role, state }}">
            <th scope="row">{{uid}}</th>
            <td :title='username'>{{username}}</td>
            <td :title='email'>{{email}}</td>
            <td :title='tele'>{{tele}}</td>
            <td :title='role'>{{role}}</td>
            <td>
                <div 
                    class="change-btn-state" 
                    @click.stop="handleChangeBtnState($event, uid, state)"
                >
                    <button 
                        type="button" 
                        :class="['btn-state', {'btn-state-true': state }]"
                    ></button>
                    <div :class="['ball-state', {'ball-state-true': state }]"></div>
                </div>
            </td>
            <td>
                <div class="btn-layout">
                <my-button 
                    :type="'edit'" 
                    :link="true" 
                    :to="'edit-user/'+uid"
                >编辑</my-button>
                <my-button 
                    :type="'delete'"
                    @click.native="handleClickDeleteUser(uid)"
                >删除</my-button>
                <my-button 
                    :type="'setting'"
                    :link="true"
                    :to="{name: 'assignRole', params: {uid, username, role}}"
                >分配角色</my-button>
                </div>
            </td>
        </template>
    </my-table>
    </div>
    <!-- 
        total: 总数据条数
        pagenum: 总页数
        page: 当前页
        count：一页的数据的条数
        pagetotal: 本页一共有多少条数据
     -->
    <my-paging 
        :total="userList.length"
        :pagetotal="partPageUserList.length"
        :pagenum="newpagenum"
        :page.sync="newpage"
        :count.sync="newCount"
    ></my-paging>
</div>
</template>

<script>
const UserSearch = () => import("./UserSearch")
import { messageTip } from '../JS'
import { Local } from '../../common'
import { 
    USER_LIST
} from '../../config/localConstant'
import { 
    searchUser,
    deleteUser, 
    getUserList,
    modifyUserState 
} from '../../config/data'
export default {
    name: "userList",
    data() {
        return {
            userList: [], /* 未分页的数据 */
            partPageUserList: [], /* 已分页的数据 */
            count: 2, /* 一页显示的数量 */
            pageNum: 0, /* 总页数 */
            total: 0, /* 总数据数量 */
            page: 1, /* 当前页数 */
            pret: 0,
        }
    },
    created() {
        this.getUserListData()
    },
    methods: {
        async handleChangeBtnState(e, uid, state) {
            const nowt = Number(Date.now())
            if(nowt - this.pret <= 300) return;
            this.pret = nowt
            let result = await modifyUserState({
                uid,
                userState: state
            })
            if(result.fsBool) {
                this.partPageUserList = this.partPageUserList.map(user => {
                    if(user.uid === uid) {
                        user.state = result.data?.userState
                    }
                    return user;
                })
                this.userList = result.data?.userListOfModify
            }
        },
        async handleClickDeleteUser(uid) {
            let result = await deleteUser({uid})
            if(result.fsBool) {
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                msg[USER_LIST.SELECTED_PAGE_NUMBER] = Math.ceil(result.data.list.length / msg[USER_LIST.SELECTED_PAGE_OF_COUNT]) || 1
                Local.set(USER_LIST.KEY, msg)
                messageTip({content: "删除成功"})
                // 删除后，延迟更新
                setTimeout(this.getUserListData, 60)
            }
        },
        async SearchUserInfo(val) {
            let nowt = Number(Date.now())
            if(nowt - this.pret < 1000) {
                messageTip({content: "太快了，受不了啦！！"})
                return;
            }
            this.pret = nowt
            val = val.replace(/\s/g, "")
            if(!val) {
                messageTip({content: "搜索内容不能为空"})
                return;
            }
            let result = await searchUser(val)
            if(result.data?.user.length > 0) {
                messageTip({content: "搜索成功"})
                this.partPageUserList = result.data?.user
                this.total = result.data?.user.length
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                this.pageNum = Math.ceil(this.total / msg[USER_LIST.SELECTED_PAGE_OF_COUNT]) || 1
                this.page = 1
                this.count = 10
            }
        },
        async getUserListData() {
            let { msg } = Local.get(USER_LIST.KEY)
            msg = msg ? msg : {}
            let pageCount = msg[USER_LIST.SELECTED_PAGE_OF_COUNT]
            let pageNumber = msg[USER_LIST.SELECTED_PAGE_NUMBER]
            let result = await getUserList({
                page: pageNumber || this.page,
                count: pageCount || this.count
            })
            let { 
                userList, 
                currPageData, 
                total, 
                pageTotal, 
                count, 
                page, 
            } = result.data
            this.userList = userList
            this.partPageUserList = currPageData
            this.total = total
            this.pageNum = pageTotal
            this.count = count
            this.page = page
        },
    },
    computed: {
        newThList() {
            return ["#", "姓名", "邮箱", "电话", "角色", "状态", "操作"];
        },
        newpage: {
            get() {
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                this.page = msg[USER_LIST.SELECTED_PAGE_NUMBER] || 1
                return this.page;
            },
            set(val) {
                this.page = Number(val)
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                msg[USER_LIST.SELECTED_PAGE_NUMBER] = this.page
                Local.set(USER_LIST.KEY, msg)
                this.getUserListData()
            }
        },
        newCount: {
            get() {
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                return msg[USER_LIST.SELECTED_PAGE_OF_COUNT] || this.count;
            },
            set(val) {
                console.log(val)
                this.count = Number(val)
                let { msg } = Local.get(USER_LIST.KEY)
                msg = msg ? msg : {}
                msg[USER_LIST.SELECTED_PAGE_OF_COUNT] = this.count
                Local.set(USER_LIST.KEY, msg)
                this.getUserListData()
            }
        },
        newpagenum() {
            return this.pageNum
        }
    },
    components: { UserSearch }
}
</script>

<style scoped>
.user-list {
    width: 100%;
    height: 100%;
}
.div-table-layout {
    height: calc(100% - 100px);
}
th:nth-of-type(1) {
    width: 64px;
}
th:nth-of-type(6),
td:nth-of-type(5) {
    width: 100px;
}
th:nth-of-type(7),
td:nth-of-type(6) {
    width: 220px;
}
.change-btn-state {
    position: relative;
    width: 64px;
    height: 28px;
    border-radius: 14px;
    margin: auto;
}
.btn-state {
    width: 64px;
    height: 28px;
    border: none;
    outline: none;
    border-radius: 14px;
    background-color: #ccc;
    cursor: pointer;
    transition: 0.32s;
}
.btn-state-true {
    background-color: #3b7df7;
}
.ball-state {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #4385ff;
    cursor: pointer;
    z-index: 1;
    transition: 0.32s;
}
.ball-state-true {
    left: 36px;
    background-color: #fff;
}
.table-info .btn-delete {
    margin: 0 12px;
}
.btn-layout {
    display: flex;
    justify-content: center;
    align-items: center;
}
.change-btn-state {
    position: relative;
    width: 64px;
    height: 28px;
    border-radius: 14px;
}
.btn-state {
    width: 64px;
    height: 28px;
    border: none;
    outline: none;
    border-radius: 14px;
    background-color: #ccc;
    cursor: pointer;
    transition: 0.32s;
}
.btn-state-true {
    background-color: #3b7df7;
}
.ball-state {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #4385ff;
    cursor: pointer;
    z-index: 1;
    transition: 0.32s;
}
.ball-state-true {
    left: 36px;
    background-color: #fff;
}
</style>